<!--  -->
<template>
  <div class="order container">
    <h1>我的订单</h1>
    <el-table
      ref="multipleTable"
      border
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      :span-method="objectSpanMethod"
    >
      <!-- <el-table-column
      type="index"
      :index="getIndex"
      width="50">
    </el-table-column> -->
      <el-table-column prop="ordernumber" label="订单号" width="130"> </el-table-column>

      <el-table-column prop="title" label="商品名" width="200"> </el-table-column>
      <el-table-column prop="address" label="地址" show-overflow-tooltip>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="deleteRow(scope.$index, tableData)"
            type="text"
            size="medium"
          >
            移除
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="金额" width="100"
        ><template slot-scope="scope">{{ scope.row.price }}元</template>
      </el-table-column>
      <el-table-column prop="state" label="订单状态" width="100"> </el-table-column>
      <el-table-column prop="pay" label="是否付款" width="100"> </el-table-column>
      <el-table-column prop="date" label="下单时间" width="110"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "Order",
  data() {
    return {
      // index:0,
      tableData: [
        {
          date: "2016-05-03  12:24:13",
          title: "日本柴犬幼犬纯种豆柴活体宠物狗家养犬黑白赤柴秋田血统CKU犬舍",
          price: 1000,
          address: "上海市普陀区金沙江路 1518 弄",
          state: "待发货",
          pay: "已支付",
          ordernumber: "199820220211171528",
        },
        {
          date: "2016-05-03  12:24:13",
          title: "日本柴犬幼犬纯种豆柴活体宠物狗家养犬黑白赤柴秋田血统CKU犬舍",
          price: 1000,
          address: "上海市普陀区金沙江路 1518 弄",
          state: "待发货",
          pay: "已支付",
          ordernumber: "199820220211171528",
        },
        {
          date: "2016-05-02  12:24:13",
          title: "日本柴犬幼犬纯种豆柴活体宠物狗家养犬黑白赤柴秋田血统CKU犬舍",
          price: 1000,
          address: "上海市普陀区金沙江路 1518 弄",
          state: "待发货",
          pay: "已支付",
          ordernumber: "199820220211171856",
        },
        {
          date: "2016-05-03  12:24:13",
          title: "日本柴犬幼犬纯种豆柴活体宠物狗家养犬黑白赤柴秋田血统CKU犬舍",
          price: 1000,
          address: "上海市普陀区金沙江路 1518 弄",
          state: "已发货",
          pay: "已支付",
          ordernumber: "199820220211171552",
        },
        {
          date: "2016-05-24  12:24:13",
          title: "日本柴犬幼犬纯种豆柴活体宠物狗家养犬黑白赤柴秋田血统CKU犬舍",
          price: 1000,
          address: "上海市普陀区金沙江路 1518 弄",
          state: "待发货",
          pay: "已支付",
          ordernumber: "199820220211177583",
        },
      ],
      multipleSelection: [],
    };
  },
  // created(){
  //   this.flitterData4()
  // },
  methods: {
    // 删除操作
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    // getIndex(index){
    // console.log(index)
    // return ++this.index
    // },
    // 订单号相同则合并
    flitterData4() {
      let spanOneArr = [];
      let concatOne = 0;
      // let spanOneArr1 = []
      // let concatOne1 = 0
      this.tableData.forEach((item, index) => {
        //循环后端查询出来的数据(tableData)
        if (index === 0) {
          spanOneArr.push(1);
        } else {
          //name 修改
          if (item.date === this.tableData[index - 1].date) {
            //第一列需合并相同内容的字段
            spanOneArr[concatOne] += 1;
            spanOneArr.push(0);
          } else {
            spanOneArr.push(1);
            concatOne = index;
          }
          if (item.ordernumber === this.tableData[index - 1].ordernumber) {
            //第一列需合并相同内容的字段
            spanOneArr[concatOne] += 1;
            spanOneArr.push(0);
          } else {
            spanOneArr.push(1);
            concatOne = index;
          }
          // if(item.ordernumber === this.coachdata[index - 1].ordernumber){ //第二列需合并相同内容的判断条件
          // spanOneArr1[concatOne1] += 1
          // spanOneArr1.push(0)
          // }else{
          // spanOneArr1.push(1)
          // concatOne1 = index
          // }
        }
      });
      return {
        one: spanOneArr,
        // two:spanOneArr1
      };
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      console.timeLog(row, column);
      if (
        columnIndex === 0 ||
        columnIndex === 2 ||
        columnIndex === 6 ||
        columnIndex === 5 ||
        columnIndex === 7
      ) {
        // this.tableData 修改
        const _row = this.flitterData4(this.tabData).one[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        // this.index = 0
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
      //判断是否是第二列，如果是就将第二列相同字段进行合并
      // if(columnIndex ===7 ) {
      // const _row = (this.flitterData(this.tableData).two)[rowIndex]
      // const _col = _row > 0 ? 1 : 0
      // return {
      // rowspan: _row,
      // colspan: _col
      // }
      // }
    },
  },
};
</script>
<style lang="less" scoped>
@import "../assets/css/total";
.order {
  h1 {
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 20px;
  }
  background-color: rgb(235, 232, 232);
  box-sizing: border-box;
  padding: 20px;
}
</style>
